<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>	Personal</title>
</head>
<style>
  .top{
    width: 500px; 
    height: 130px;
    margin: 0 auto;
    text-align:center;
    font-size:20px;
    display: flex;
  }
  .img{
    margin-left: 0;
    width: 200px; 
    height: 100px;
  }
  span.error{
     color:#4169E1;
  }
  .personal{
     width: 810px; 
     height: 400px;
     margin: 0 auto;
     display: flex;
     font-size:20px;
     box-shadow:0 0px 10px #aaa;
  }
  .left{
     width: 400px; 
     height: 400px;
     margin-left: 0;
  }
  .in{
     box-shadow:0 0px 5px 2px #aaa;
  }
    .img2{
    margin-top: 30px;
    width: 200px; 
    height: 100px;
  }
   .right{
     width: 400px; 
     height: 400px;
     margin-right: 0;
  }
  .input{
     border:1px solid #aaa;
     background:#FFFFFF;
  }
  .button{
     width: 110px; 
     height: 30px;
     margin: 0 auto;
     box-shadow:0 0px 10px #aaa;
     text-align:center;
  }
  a:link,a:visited{
     text-decoration:none; 
     color:#000;
  }
</style>
<body>
<form method="POST" th:action="@{/checkout}" th:object="${personal}">
 <div class="top">
    <div class="img">
       <img th:src="@{/images/3.jpg}"  width="140" height="100"/>
    </div>
    <h1 align="center">个人信息</h1>
  </div>
  <div class="personal">
   <div class="left">
    <br>
    <label for="name">姓名: </label>
    <input class="in" type="text" th:field="*{name}" name="name" />
    <span class="error"
            th:if="${#fields.hasErrors('name')}"
            th:errors="*{name}">Name Error</span>
    <br><br><br>
    <label for="sex">性别: </label>
    <input class="in" type="text" th:field="*{sex}" name="sex"/>
    <span class="error"
            th:if="${#fields.hasErrors('sex')}"
            th:errors="*{sex}">Sex Error</span>
    <br><br><br>
    <label for="born">出生: </label>
    <input class="in" type="text" th:field="*{born}" name="born"/>
    <span class="error"
            th:if="${#fields.hasErrors('born')}"
            th:errors="*{born}">Born Error</span>
    <div class="img2">
       <img th:src="@{/images/2.jpg}"  width="130" height="100"/>
    </div>
   </div>
   <div class="right">
    <br>
    <label for="number">学号: </label>
    <input class="in" type="text" th:field="*{number}" name="number"/>
    <span class="error"
            th:if="${#fields.hasErrors('number')}"
            th:errors="*{number}">Number Error</span>
    <br><br><br>
    <label for="grade">年级: </label>
    <input class="in" type="text" th:field="*{grade}" name="grade"/>
    <span class="error"
            th:if="${#fields.hasErrors('grade')}"
            th:errors="*{grade}">Grade Error</span>
    <br><br><br>
    <label for="professional">专业: </label>
    <input class="in" type="text" th:field="*{professional}" name="professional"/>
    <span class="error"
            th:if="${#fields.hasErrors('professional')}"
            th:errors="*{professional}">Professional Error</span>
    <br><br><br>
    <label for="college">学院: </label>
    <input class="in" type="text" th:field="*{college}" name="college"/>
    <span class="error"
            th:if="${#fields.hasErrors('college')}"
            th:errors="*{college}">College Error</span>
    <br>
   </div>
    <input class="input" type="submit" value="检查信息+提交"/>
  </div>
  <br>
  <div class="button">
    <a th:href="@{/course/welcome}">回首页</a><br/>
  </div>
 </form>
</body>
</html>